<template>
  <Page>
    <!-- 头部布局 -->
    <template #hd>
      <el-row class="a" style="font-size: 14px; font-weight:600;">
        <el-form-item label="店铺名称" >
          <el-input placeholder="请输入店铺名称" clearable v-model="input" @keydown.enter="getList"/>
        </el-form-item>
        <el-form-item label="状态" style="margin-left:30px;">
          <el-select  v-model="value" filterable clearable placeholder="状态" >
            <el-option label="启用"  value="1" />
                <el-option label="禁用"  value="0"/>
          </el-select>
        </el-form-item>
        <el-button  @click="getList" style="margin-left:10px; font-size: 13px;" icon="Search" >搜索</el-button>
        <el-button style="font-size: 13px;" icon="Refresh" @click="getListRest">重置</el-button>
        <el-button @click="dialogFormVisible = true" style="font-size: 13px;" icon="Plus">新增店铺</el-button>
      </el-row>
    </template>
    <!-- 显示数据表格 -->
    <template #ct>
    <el-table :data="list" height="100%"
    :header-cell-style="{'text-align':'center', 'background-color':'#f8f8f9','height':'50px'}"
    :cell-style="{'text-align':'center', 'font-size':'12px'}">
      <el-table-column prop="id" label="ID" width="55" />
      <el-table-column prop="Associatestore" label="所属商铺" />
      <el-table-column prop="storename" label="店铺名称" />
      <el-table-column prop="defaultstore" label="默认店铺" >
        <template #default="{ row }">
        <el-switch  v-model="row.defaultstore" class="ml-2" :active-value="1" :inactive-value="0" :disabled="true"
        style="--el-switch-on-color: #00acac; " />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="联系人"  />
      <el-table-column prop="userphone" label="手机号"  />
      <el-table-column prop="storeaddress" label="地址"  />
      <el-table-column prop="selltime" label="营业时间"  />
      <el-table-column prop="createdAt" label="创建时间" width="160" style="text-align: center;" >
        <template #default="{ row }"> {{ formatTime(row.createdAt) }}</template>
      </el-table-column>
      <el-table-column prop="state" label="状态"   style="text-align: center;">
        <template #default="{ row }">
        <el-switch :before-change="()=>changestate(row, row.state, row.id)"
          v-model="row.state" class="ml-2" :active-value="1" :inactive-value="0"
        style="--el-switch-on-color: #00acac; " />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="openEdit({ ...row })" type='success' text='success' style="color:#00acac; font-size: 12px;"  link icon="EditPen">编辑</el-button>
          <el-button @click="handleDel(row.id)" type='success' text='success' style="color:#00acac; font-size: 12px;" link icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
    <!-- 底部分页器 -->
    <template #ft>
      <el-pagination
      :small="true"
      :current-page="page"
      :page-sizes="[10, 20, 30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper,"
      :total="total"
      @size-change="handeSizeChange"
      @current-change="handlePageChange">
     </el-pagination>
    </template>
  </Page>
  <!-- 添加店铺弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="新增店铺" >
    <el-form :model="store" style="margin-right: 20px;" :rules="rules" ref="addfrom" >
      <el-form-item label="店铺名称" :label-width="140" prop="storename">
        <el-input v-model="store.storename" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户logo" prop="storelogo" :label-width="140">
          <el-upload
              list-type="picture-card"
              name="file"
              action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader"
              v-model:file-list="fileList"
              :on-success="UploadOk"
            >
            <el-icon ><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      <el-form-item label="是否默认店铺" :label-width="140">
        <el-radio-group v-model="store.defaultstore">
          <el-radio :label="0" >否</el-radio>
          <el-radio :label="1" checked>是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属店铺" :label-width="140">
                <el-select v-model="store.Associatestore" placeholder="请选择所属商户">
                    <el-option value="延禾技术">延禾技术</el-option>
                    <el-option value="小隅安商行">小隅安商行</el-option>
                </el-select>
      </el-form-item>
      <el-form-item label="联系人姓名" :label-width="140"  prop="username">
        <el-input v-model="store.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系人电话" :label-width="140"  prop="userphone">
        <el-input v-model="store.userphone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺详细地址" :label-width="140">
        <el-input v-model="store.storeaddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="营业时间" :label-width="140">
        <el-input v-model="store.selltime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺纬度" :label-width="140">
        <el-input v-model="store.storelatitude" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺经度" :label-width="140">
        <el-input v-model="store.storelongitude" autocomplete="off" />
      </el-form-item>
      <el-form-item label="营业执照" prop="license" :label-width="140">
          <el-upload
              list-type="picture-card"
              name="file"
              action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader"
              v-model:file-list="fileList1"
              :on-success="UploadOk1"
            >
            <el-icon ><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      <el-form-item label="统一社会信用码" :label-width="140">
        <el-input v-model="store.creditcar"  />
      </el-form-item>
      <el-form-item label="银行名称" :label-width="140">
        <el-input v-model="store.bankname"  />
      </el-form-item>
      <el-form-item label="银行卡账户名" :label-width="140">
        <el-input v-model="store.bankuser"  />
      </el-form-item>
      <el-form-item label="银行卡卡号
" :label-width="140">
        <el-input v-model="store.banknumber"  />
      </el-form-item>
      <el-form-item label="备注信息" :label-width="140">
        <el-input v-model="store.note"  :rows="2" type="textarea" placeholder="Please input"/>
      </el-form-item>
      <el-form-item label="状态" :label-width="140">
        <el-radio-group v-model="store.state">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-on:click="storeAdd">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑店铺弹窗 -->
  <el-dialog v-model="showEdit" title="编辑店铺" width="600">
    <el-form :model="editstore" style="margin-right: 20px;" :rules="rules" ref="addfrom" >
      <el-form-item label="店铺名称" :label-width="140" prop="storename">
        <el-input v-model="editstore.storename" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商户logo" prop="storelogo" :label-width="140">
          <el-upload
              list-type="picture-card"
              name="file"
              action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader"
              v-model:file-list="fileList"
              :on-success="UploadOk"
            >
            <el-icon ><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      <el-form-item label="是否默认店铺" :label-width="140">
        <el-radio-group v-model="editstore.defaultstore">
          <el-radio :label="0" >否</el-radio>
          <el-radio :label="1" checked>是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属店铺" :label-width="140">
                <el-select v-model="editstore.Associatestore" placeholder="请选择所属商户">
                    <el-option value="延禾技术">延禾技术</el-option>
                    <el-option value="小隅安商行">小隅安商行</el-option>
                </el-select>
      </el-form-item>
      <el-form-item label="联系人姓名" :label-width="140"  prop="username">
        <el-input v-model="editstore.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系人电话" :label-width="140"  prop="userphone">
        <el-input v-model="editstore.userphone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺详细地址" :label-width="140">
        <el-input v-model="editstore.storeaddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="营业时间" :label-width="140">
        <el-input v-model="editstore.selltime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺纬度" :label-width="140">
        <el-input v-model="editstore.storelatitude" autocomplete="off" />
      </el-form-item>
      <el-form-item label="店铺经度" :label-width="140">
        <el-input v-model="editstore.storelongitude" autocomplete="off" />
      </el-form-item>
      <el-form-item label="营业执照" prop="license" :label-width="140">
          <el-upload
              list-type="picture-card"
              name="file"
              action="http://www.wzsqyg.com/attachment/upload"
              class="avatar-uploader"
              v-model:file-list="fileList1"
              :on-success="UploadOk1"
            >
            <el-icon ><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      <el-form-item label="统一社会信用码" :label-width="140">
        <el-input v-model="editstore.creditcar"  />
      </el-form-item>
      <el-form-item label="银行名称" :label-width="140">
        <el-input v-model="editstore.bankname"  />
      </el-form-item>
      <el-form-item label="银行卡账户名" :label-width="140">
        <el-input v-model="editstore.bankuser"  />
      </el-form-item>
      <el-form-item label="银行卡卡号
" :label-width="140">
        <el-input v-model="editstore.banknumber"  />
      </el-form-item>
      <el-form-item label="备注信息" :label-width="140">
        <el-input v-model="editstore.note"  :rows="2" type="textarea" placeholder="Please input"/>
      </el-form-item>
      <el-form-item label="状态" :label-width="140">
        <el-radio-group v-model="editstore.state">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-on:click="handleEidt">
          确认
        </el-button>
        <el-button @click="showEdit = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" src="./index"></script>
<style lang="scss" scoped>
@import './style.scss';
</style>
